<template>
  <div class="view-container">
    <el-table :data="formatData" border style="width: 100%">
      <el-table-column type="index" label="#" v-if="showIndex"></el-table-column>
      <el-table-column
        :label="column.label"
        :width="column.width"
        v-for="column in columns"
        :key="column.name"
      >
        <template slot-scope="scope">
          <span class="column-name" v-if="column.name==='date'" :style="styleSpace(scope.row._level)">
            <i
              v-if="column.name==='date'&&scope.row._expanded!==undefined"
              :class="[scope.row._expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline']"
              @click="handleExpand(scope.$index)"
            ></i>
            {{scope.row[column.name]}}
          </span>
          <span v-else>{{scope.row[column.name]}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import expandArray from './utils/expandArray'
export default {
  data() {
    const tableData = [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        children: [
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-05',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            children: [
              {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              },
              {
                date: '2016-05-05',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }
            ]
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ]
      }
    ]

    return {
      showIndex: true,
      columns: [
        {
          name: 'date',
          label: '日期'
        },
        {
          name: 'name',
          label: '姓名'
        },
        {
          name: 'address',
          label: '地址'
        }
      ],
      tableData
    }
  },
  computed: {
    formatData() {
      return expandArray.call(this, this.tableData)
    }
  },
  methods: {
    styleSpace(level) {
      return {
        marginLeft: level * 30 + 'px'
      }
    },
    handleExpand(index) {
      const row = this.formatData[index]
      row._expanded = !row._expanded
    }
  }
}
</script>

<style lang="stylus" scoped>
.column-name
  position relative
  i
    position absolute
    top 50%
    transform translate(-20px, -50%)
    cursor pointer
</style>
